<template>
  <el-row type="flex" justify="center">
    <el-col :span="20">
      <el-collapse  accordion>
        <el-collapse-item  v-for="(data, key, index) in list" :key="index" @click.native="getDetail(list[key].id)">
          <template slot="title">
            <h1>{{data.name}}</h1>
            &emsp;&emsp;
            <h1>{{data.time | formatDate}}</h1>
            &emsp;&emsp;
            <h1>{{data.finished | changeToChinese}}</h1>
          </template>
          <el-timeline>
            <el-timeline-item  placement="top" v-for="(detailData, key, index) in detailList" :key="index">
              <template slot="timestamp">
              </template>
              <el-card>
                <h1>{{detailData.state}}</h1>
                <h1>{{detailData.time| formatDate}}</h1>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        reverse: true,
        list:[],
        detailList:[]
      };
    },
    methods: {
      async getdata(){
        let {  data: list } = await this.$http.get("/user/workflow");
        console.log('list:', list);
        this.list = list.data
      },
      async getDetail(processId){
        let {  data: list } = await this.$http.get("/user/workflow/"+processId);
        this.detailList=list.data
        console.log('detailList:',list.data)
        console.log('list:', list);
      }
    },
    mounted(){
      this.getdata();
    }
  };
</script>

<style>

</style>
